/**
1. 在views 中创建视图组件
2. 在 router 中配置路由导航
3. 使用 element 布局
4. 编写 api 请求函数
5. 调用请求函数，按倒结果，渲染到页面中
 */
<template>
<div>
  <el-row>
    <el-col :span="4">
      <!-- type="primary" 主要颜色 -->
      <el-button type="danger">添加角色</el-button>
    </el-col>
  </el-row>
  <el-table
    stripe
    border
    :data="roles"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="商品名称">
            <span>{{ props.row.name }}</span>
          </el-form-item>
          <el-form-item label="所属店铺">
            <span>{{ props.row.shop }}</span>
          </el-form-item>
          <el-form-item label="商品 ID">
            <span>{{ props.row.id }}</span>
          </el-form-item>
          <el-form-item label="店铺 ID">
            <span>{{ props.row.shopId }}</span>
          </el-form-item>
          <el-form-item label="商品分类">
            <span>{{ props.row.category }}</span>
          </el-form-item>
          <el-form-item label="店铺地址">
            <span>{{ props.row.address }}</span>
          </el-form-item>
          <el-form-item label="商品描述">
            <span>{{ props.row.desc }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column type="index"></el-table-column>
    <el-table-column
      label="角色名称"
      prop="roleName">
    </el-table-column>
    <el-table-column
      label="描述"
      prop="roleDesc">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        <el-button
          size="mini"
          type="warning"
          @click="handleDelete(scope.$index, scope.row)">授权角色</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import { getRoleList } from '@/api/role'
export default {
  name: 'Roleslist',
  data () {
    return {
      roles: []
    }
  },
  created () {
    this.loadRoles()
  },
  methods: {
    async loadRoles () {
      const { data, meta } = await getRoleList()
      if (meta.status === 200) {
        this.roles = data
      }
    },
    handleEdit () {},
    handleDlete () {}
  }
}
</script>

<style scoped>
.el-table {
  margin-top: 15px;
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
